{% extends "base.html" %}
{% load staticfiles %}
{% block title %}登录{% endblock %}
{% block style %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock %}
{% block nav_home_active %}active{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">
            {%if request.user.is_authenticated %}
            <div class="had_login">
                <p>已登录，<span id="redirect">5</span>秒后跳转到首页...</p>
            </div>
            <script>
                var t = 4
                var t1 = setInterval(() => {
                    $("#redirect").text(t)
                    t -= 1
                }, 1000);
                setTimeout(function () {
                    clearInterval(t1)
                    window.location.href = '/'
                }, 5000)
            </script>
            {% else %}
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">登录</h3>
                </div>
                <div class="panel-body">
                    <form action="" method="POST">
                        {% csrf_token %}
                        {% for field in login_form %}
                        <div class="form-group">
                            <label for="{{ field.id_for_label }}">
                                {{ field.label }}
                            </label>
                            {{ field }}
                            <p class="text-danger">
                                {{ field.errors.as_text }}
                            </p>
                        </div>
                        {% endfor %}
                        <span class="text-danger">
                            {{ login_form.non_field_errors.as_text }}
                        </span>
                        <a href="{% url 'forget_password' %}"><button type="button"
                                    class="btn btn-default pull-left">重置密码</button></a>
                        <button type="submit" class="btn btn-primary pull-right">登录</button>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
